import React from 'react';
import {Layout,Menu} from 'antd'
import {UserOutlined, LaptopOutlined, NotificationOutlined} from'@ant-design/icons';
import {NavLink} from 'react-router-dom';
const {Sider,Content}=Layout;
const {SubMenu}=Menu;
export default (props)=>{
	console.log('UX', props);
	return (<Layout>
		<Sider width={200} className="site-layout-background">
			<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}
			      style={{ height: '100%', borderRight: 0 }}>
				<SubMenu key="sub1" icon={<UserOutlined />} title="地图">
					<Menu.Item key="1"><NavLink to='/'>广州地图</NavLink></Menu.Item>
					<Menu.Item key="2"><NavLink to='/macro'>上海地图</NavLink></Menu.Item>
				</SubMenu>
				<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
					<Menu.Item key="5">option5</Menu.Item>
					<Menu.Item key="6">option6</Menu.Item>
					<Menu.Item key="7">option7</Menu.Item>
					<Menu.Item key="8">option8</Menu.Item>
				</SubMenu>
				<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
					<Menu.Item key="9">option9</Menu.Item>
					<Menu.Item key="10">option10</Menu.Item>
					<Menu.Item key="11">option11</Menu.Item>
					<Menu.Item key="12">option12</Menu.Item>
				</SubMenu>
			</Menu>
		</Sider>
		<Layout style={{ padding: '0 24px 24px' }}>
			<Content>meData</Content>
		</Layout>
	</Layout>)
}
